<template>
  <div id="cesiumContainer" ref="viewer" style="position: relative;width:100%; height:100%;">
    <div style="padding: 0px 10px;position: absolute;right: 5px;bottom: 33px;height: 33px;line-height:33px;background-color: rgba(0,0,0,0.3);z-index: 1000;color: #FFF;">{{location}}</div>
    <div style="display: flex;position: absolute;right: 10px;top: 7px;z-index: 1000;color: #FFF" v-show="true">
      <div class="button iconfont" @click="clearPlot" title="清除标绘">&#xe747;</div>
      <div class="button iconfont" @click="point(0)" title="点">&#xe7c2;</div>
      <div class="button iconfont" @click="line" title="线">&#xe67e;</div>
      <div class="button iconfont size20" @click="polygon" title="面">&#xe605;</div>
      <div class="button iconfont" @click="point(1)" title="空间取点">&#xe600;</div>
      <div class="button iconfont size20" @click="spaceDrawLine" title="空间量距">&#xe604;</div>
      <div class="button iconfont size20" @click="spaceDrawGon" title="空间量面">&#xe68e;</div>
    </div>
  </div>
</template>

<script>
import 'cesium/Widgets/widgets.css'
let Cesium = require('cesium/Cesium')

export default {
  name: 'cesiumViewer',
  data () {
    return {
      location: '',
      basePlotEntity: null
    }
  },
  mounted () {
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmViODU4Yy0yNzJhLTQ0ZDYtOTU0Ny1jMjE3MTI3NmI0ZGYiLCJpZCI6MTM3NTEsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjM5NjE5OTJ9.V6yYNDSkghpbRVIc4s6Ipms2Yaa9LZgLo9IlHHkQhyg'
    let options = {
      // 使用其他地图源
      // imageryProvider : Cesium.createTileMapServiceImageryProvider({
      //   //url : Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII‘) //使用的是默认的离线地图离线地图
      //   url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7711a24780452f03bb7c02fba98183b9'
      // }),
      // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      //   url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
      // }),
      baseLayerPicker: true, // 底图小控件
      animation: false, // 是否显示动画控件
      scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      timeline: true,
      infoBox: false,
      selectionIndicator: false, // 不包含选择指示器
      navigationHelpButton: false, // 是展开导航帮助面板，否点击navigationHelpButton才能展开面板。
      // 展示地形
      terrainProvider: Cesium.createWorldTerrain({
        requestWaterMask: true, // 请求水面数据
        requestVertexNormals: true // 请求光照数据
      })
    }
    let viewer = new Cesium.Viewer('cesiumContainer', options)
    // 调用影像中文注记服务
    viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.com/cia_w/wmts?tk=74f751183c5556b9422a6fd335c7a300&service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg',
      layer: 'tdtAnnoLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
      show: true
    }))

    /* // 删除默认的影像图层
    viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
    // 增加谷歌影像底图
    viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
      url: 'http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}',
      tilingScheme: new Cesium.WebMercatorTilingScheme()
    })
    ) */
    // 设置默认地图源
    viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6]

    // 打开深度检测，那么在地形以下的对象不可见
    viewer.scene.globe.depthTestAgainstTerrain = true
    // 天地图太暗？试试这个！
    // viewer.scene.highDynamicRange = false
    // 开启全球光照
    viewer.scene.globe.enableLighting = true
    viewer.shadows = true
    // 去掉版权logo
    viewer.cesiumWidget.creditContainer.style.display = 'none'
    // 禁止双击zoom
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    )

    this.$emit('ready', { Cesium, viewer })
    this.viewer = viewer
    // 新建标绘图层父类
    this.basePlotEntity = viewer.entities.add(new Cesium.Entity({id: 'basePlot'}))
    this.getMouseLocation(viewer, Cesium)
  },
  methods: {
    getMouseLocation (viewer, Cesium) {
      // 得到当前三维场景
      let scene = viewer.scene
      // 得到当前三维场景的椭球体
      let ellipsoid = scene.globe.ellipsoid
      let entity = viewer.entities.add({
        label: {
          show: false
        }
      })
      let longitudeString = null
      let latitudeString = null
      let height = null
      let cartesian = null
      // 定义当前场景的画布元素的事件处理
      let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
      // 设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
      let self = this
      // 鼠标点击后取当前经纬度
      handler.setInputAction(function (event) {
        let earthPosition = viewer.scene.pickPosition(event.position)
        if (Cesium.defined(earthPosition)) {
          let cartographic = Cesium.Cartographic.fromCartesian(earthPosition)
          let lonF = Cesium.Math.toDegrees(cartographic.longitude) // lon
          let latF = Cesium.Math.toDegrees(cartographic.latitude) // lat
          let poHig = cartographic.height// 这个就是获取的模型上的高度
          self.location = Math.round(lonF * 10000) / 10000 + ',' + Math.round(latF * 10000) / 10000 + ',' + Math.round(poHig * 100) / 100
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 鼠标移动获取当前经纬度
      handler.setInputAction(function (movement) {
        // 通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
        cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid)
        if (cartesian) {
          // 将笛卡尔坐标转换为地理坐标
          let cartographic = ellipsoid.cartesianToCartographic(cartesian)
          // 将弧度转为度的十进制度表示
          longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
          latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
          // 获取相机高度
          height = Math.ceil(viewer.camera.positionCartographic.height)
          entity.position = cartesian
          // entity.label.show = true;
          entity.label.text = '' + longitudeString + ', ' + latitudeString + ', ' + height + ''
          self.location = Math.round(longitudeString * 10000) / 10000 + ',' + Math.round(latitudeString * 10000) / 10000 + ',' + Math.round(height * 100) / 100
        } else {
          entity.label.show = false
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 设置鼠标滚动事件的处理函数，这里负责监听高度值变化
      handler.setInputAction(function (wheelment) {
        height = Math.ceil(viewer.camera.positionCartographic.height)
        entity.position = cartesian
        // entity.label.show = true;
        entity.label.text = '' + longitudeString + ', ' + latitudeString + ',' + height + ''
        self.location = Math.round(longitudeString * 10000) / 10000 + ',' + Math.round(latitudeString * 10000) / 10000 + ',' + Math.round(height * 100) / 100
      }, Cesium.ScreenSpaceEventType.WHEEL)
    },
    // 点线面
    point (type) {
      let self = this
      this.drawPoint(function (positions) {
        let wgs84Positions = []
        for (let i = 0; i < positions.length; i++) {
          let wgs84Point = self.Cartesian3_to_WGS84({
            x: positions[i].x,
            y: positions[i].y,
            z: positions[i].z
          })
          wgs84Positions.push(wgs84Point)
        }
      }, type)
    },
    line () {
      let self = this
      this.drawLine(function (positions) {
        let wgs84Positions = []
        for (let i = 0; i < positions.length; i++) {
          let wgs84Point = self.Cartesian3_to_WGS84({
            x: positions[i].x,
            y: positions[i].y,
            z: positions[i].z
          })
          wgs84Positions.push(wgs84Point)
        }
      })
    },
    polygon () {
      let self = this
      this.drawPolygon(function (positions) {
        let wgs84Positions = []
        for (let i = 0; i < positions.length; i++) {
          let wgs84Point = self.Cartesian3_to_WGS84({
            x: positions[i].x,
            y: positions[i].y,
            z: positions[i].z
          })
          wgs84Positions.push(wgs84Point)
        }
      })
    },
    clearPlot () {
      // 移除所有标绘实体Entity
      let entitiesList = this.viewer.entities._entities._array
      let dom = this
      entitiesList.map((entity) => {
        if (entity.parent && entity.parent.id === 'basePlot') {
          dom.viewer.entities.remove(entity)
        }
      })
    },
    drawPoint (callback, type) {
      let _this = this
      // 坐标存储
      let positions = []
      let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
      // handler.destroy();
      // 单击鼠标左键画点
      let cartesian = null
      handler.setInputAction(function (movement) {
        if (type === 0) {
          cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid)
        } else {
          cartesian = _this.viewer.scene.pickPosition(movement.position)
        }
        positions.push(cartesian)
        let point = _this.Cartesian3_to_WGS84({x: cartesian.x, y: cartesian.y, z: cartesian.z})
        let text = '经度:' + Math.round(point.lng * 10000) / 10000 + ',纬度:' + Math.round(point.lat * 10000) / 10000 + ',高度:' + Math.round(point.alt * 100) / 100
        _this.viewer.entities.add({
          parent: _this.basePlotEntity,
          position: cartesian,
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            heightReference: Cesium.HeightReference.NONE
          },
          label: {
            text: text,
            font: '18px sans-serif',
            fillColor: Cesium.Color.GOLD,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(20, -20),
            heightReference: Cesium.HeightReference.NONE
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 单击鼠标右键结束画点
      handler.setInputAction(function (movement) {
        handler.destroy()
        callback(positions)
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },
    drawLine (callback) {
      let _this = this
      let PolyLinePrimitive = (function () {
        function _ (positions) {
          this.options = {
            parent: _this.basePlotEntity,
            polyline: {
              show: true,
              positions: [],
              material: Cesium.Color.CHARTREUSE,
              width: 2
            },
            label: {
              text: 'textDisance',
              font: '18px sans-serif',
              fillColor: Cesium.Color.GOLD,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              outlineWidth: 2,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(20, -20),
              heightReference: Cesium.HeightReference.NONE
            }
          }
          this.positions = positions
          this._init()
        }

        _.prototype._init = function () {
          let _self = this
          let _update = function () {
            return _self.positions
          }
          // 实时更新polyline.positions
          this.options.polyline.positions = new Cesium.CallbackProperty(_update, false)
          _this.viewer.entities.add(this.options)
        }
        return _
      })()
      let handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas)
      let positions = []
      let distance = 0
      let poly = null
      // 鼠标左键单击画点
      handler.setInputAction(function (movement) {
        let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid)
        if (positions.length === 0) {
          positions.push(cartesian.clone())
        }
        positions.push(cartesian)

        let textDisance = distance + '米'
        _this.viewer.entities.add({
          parent: _this.basePlotEntity,
          name: '空间直线距离',
          // position: Cesium.Cartesian3.fromDegrees(cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180,cartographic.height),
          position: positions[positions.length - 1],
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            heightReference: Cesium.HeightReference.NONE
          },
          label: {
            text: textDisance,
            font: '18px sans-serif',
            fillColor: Cesium.Color.GOLD,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(20, -20),
            heightReference: Cesium.HeightReference.NONE
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 鼠标移动
      handler.setInputAction(function (movement) {
        let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid)
        if (positions.length >= 2) {
          if (!Cesium.defined(poly)) {
            poly = new PolyLinePrimitive(positions)
          } else {
            if (cartesian !== undefined) {
              positions.pop()
              // cartesian.y += (1 + Math.random());
              positions.push(cartesian)
              distance = _this.getSpaceDistance(positions).toFixed(2)
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 单击鼠标右键结束画线
      handler.setInputAction(function (movement) {
        handler.destroy()
        positions.pop()// 最后一个点无效
        callback(positions)
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },
    // 画面
    drawPolygon (callback) {
      let _this = this
      let PolygonPrimitive = (function () {
        function _ (positions) {
          this.options = {
            parent: _this.basePlotEntity,
            name: '多边形',
            polygon: {
              hierarchy: [],
              perPositionHeight: true,
              material: Cesium.Color.CHARTREUSE.withAlpha(0.4)
            }
          }
          this.hierarchy = positions
          this._init()
        }

        _.prototype._init = function () {
          let _self = this
          let _update = function () {
            return _self.hierarchy
          }
          // 实时更新polygon.hierarchy
          this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false)
          _this.viewer.entities.add(this.options)
        }
        return _
      })()

      let handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas)
      let positions = []
      let poly = null

      // 鼠标单击画点
      handler.setInputAction(function (movement) {
        let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid)
        if (positions.length === 0) {
          positions.push(cartesian.clone())
        }
        positions.push(cartesian)
        _this.viewer.entities.add({
          parent: _this.basePlotEntity,
          position: cartesian,
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            heightReference: Cesium.HeightReference.NONE
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 鼠标移动
      handler.setInputAction(function (movement) {
        let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid)
        if (positions.length >= 2) {
          if (!Cesium.defined(poly)) {
            poly = new PolygonPrimitive(positions)
          } else {
            if (cartesian !== undefined) {
              positions.pop()
              // cartesian.y += (1 + Math.random());
              positions.push(cartesian)
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 鼠标右键单击结束绘制
      handler.setInputAction(function (movement) {
        handler.destroy()
        positions.pop()// 最后一个点无效
        if (positions.length >= 3) {
          let textArea = _this.getArea(positions, positions, 1)
          _this.viewer.entities.add({
            parent: _this.basePlotEntity,
            name: '多边形面积',
            position: positions[positions.length - 1],
            label: {
              text: textArea + '平方米',
              font: '18px sans-serif',
              fillColor: Cesium.Color.GOLD,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              outlineWidth: 2,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(20, -20)
            }
          })
        }
        callback(positions)
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },

    spaceDrawLine () {
      let _this = this
      let PolyLinePrimitive = (function () {
        function _ (positions) {
          this.options = {
            parent: _this.basePlotEntity,
            polyline: {
              show: true,
              positions: [],
              material: Cesium.Color.CHARTREUSE,
              width: 2
            },
            label: {
              text: 'textDisance',
              font: '18px sans-serif',
              fillColor: Cesium.Color.GOLD,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              outlineWidth: 2,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(20, -20),
              heightReference: Cesium.HeightReference.NONE
            }
          }
          this.positions = positions
          this._init()
        }

        _.prototype._init = function () {
          let _self = this
          let _update = function () {
            return _self.positions
          }
          // 实时更新polyline.positions
          this.options.polyline.positions = new Cesium.CallbackProperty(_update, false)
          _this.viewer.entities.add(this.options)
        }
        return _
      })()
      let handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas)
      let positions = []
      let distance = 0
      let poly
      // 鼠标左键单击画点
      handler.setInputAction(function (movement) {
        // let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
        let cartesian = _this.viewer.scene.pickPosition(movement.position)
        if (positions.length === 0) {
          positions.push(cartesian.clone())
        }
        positions.push(cartesian)

        let textDisance = distance + '米'
        _this.viewer.entities.add({
          parent: _this.basePlotEntity,
          name: '空间直线距离',
          // position: Cesium.Cartesian3.fromDegrees(cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180,cartographic.height),
          position: positions[positions.length - 1],
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            heightReference: Cesium.HeightReference.NONE
          },
          label: {
            text: textDisance,
            font: '18px sans-serif',
            fillColor: Cesium.Color.GOLD,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(20, -20),
            heightReference: Cesium.HeightReference.NONE
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 鼠标移动
      let self = this
      handler.setInputAction(function (movement) {
        let cartesian = _this.viewer.scene.pickPosition(movement.endPosition)
        if (positions.length >= 2) {
          if (!Cesium.defined(poly)) {
            poly = new PolyLinePrimitive(positions)
          } else {
            positions.pop()
            // cartesian.y += (1 + Math.random());
            positions.push(cartesian)
          }
          distance = self.getSpaceDistance(positions).toFixed(2)
          // tooltip.innerHTML='<p>'+distance+'米</p>';
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 单击鼠标右键结束画线
      handler.setInputAction(function (movement) {
        handler.destroy()
        positions.pop()// 最后一个点无效
        // _this.viewer.entities.remove(floatingPoint);
        // callback(positions);
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },
    spaceDrawGon () {
      let _this = this
      let floatingPoint
      let PolygonPrimitive = (function () {
        function _ (positions) {
          this.options = {
            parent: _this.basePlotEntity,
            name: '多边形',
            polygon: {
              hierarchy: [],
              perPositionHeight: true,
              material: Cesium.Color.CHARTREUSE.withAlpha(0.4)
            }
          }
          this.hierarchy = positions
          this._init()
        }
        _.prototype._init = function () {
          let _self = this
          let _update = function () {
            return _self.hierarchy
          }
          // 实时更新polygon.hierarchy
          this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false)
          _this.viewer.entities.add(this.options)
        }

        return _
      })()
      let handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas)
      let positions = []
      let poly
      let cartesian = null
      let tempPoints = []
      // 鼠标左键单击画点
      handler.setInputAction(function (movement) {
        // tooltip.style.display = "none";
        cartesian = _this.viewer.scene.pickPosition(movement.position)
        // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
        if (positions.length === 0) {
          positions.push(cartesian.clone())
        }
        // positions.pop();
        positions.push(cartesian)
        // 在三维场景中添加点
        let cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1])
        let longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
        let latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
        let heightString = cartographic.height
        tempPoints.push({lon: longitudeString, lat: latitudeString, hei: heightString})
        floatingPoint = _this.viewer.entities.add({
          parent: _this.basePlotEntity,
          name: '多边形面积',
          position: positions[positions.length - 1],
          point: {
            pixelSize: 5,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            heightReference: Cesium.HeightReference.none
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 鼠标移动
      let self = this
      handler.setInputAction(function (movement) {
        let cartesian = _this.viewer.scene.pickPosition(movement.endPosition)
        if (positions.length >= 2) {
          if (!Cesium.defined(poly)) {
            poly = new PolygonPrimitive(positions)
          } else {
            positions.pop()
            // cartesian.y += (1 + Math.random());
            positions.push(cartesian)
          }
          self.getSpaceDistance(positions).toFixed(2)
          // tooltip.innerHTML='<p>'+self.getSpaceDistance(positions).toFixed(2)+'米</p>';
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 单击鼠标右键结束画线
      handler.setInputAction(function (movement) {
        handler.destroy()
        positions.pop()
        // tempPoints.pop();
        _this.viewer.entities.remove(floatingPoint)
        // tooltip.style.display = "none";
        // 在三维场景中添加点
        // let cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);
        // let longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        // let latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
        // let heightString = cartographic.height;
        // tempPoints.push({ lon: longitudeString, lat: latitudeString ,hei:heightString});

        let textArea = _this.getArea(tempPoints, positions) + '平方米'
        _this.viewer.entities.add({
          parent: _this.basePlotEntity,
          name: '多边形面积',
          position: positions[positions.length - 1],
          label: {
            text: textArea,
            font: '18px sans-serif',
            fillColor: Cesium.Color.GOLD,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(20, -40)
          }
        })
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },

    // 笛卡尔坐标系转WGS84坐标系
    Cartesian3_to_WGS84 (point) {
      let cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z)
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian33)
      let lat = Cesium.Math.toDegrees(cartographic.latitude)
      let lng = Cesium.Math.toDegrees(cartographic.longitude)
      let alt = cartographic.height
      return {lat: lat, lng: lng, alt: alt}
    },
    // WGS84坐标系转笛卡尔坐标系
    WGS84_to_Cartesian3 (point) {
      let car33 = Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.alt)
      let x = car33.x
      let y = car33.y
      let z = car33.z
      return {x: x, y: y, z: z}
    },
    // 两点距离计算函数
    getSpaceDistance (positions) {
      let distance = 0
      for (let i = 0; i < positions.length - 1; i++) {
        let point1cartographic = Cesium.Cartographic.fromCartesian(positions[i])
        let point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1])
        /** 根据经纬度计算出距离**/
        let geodesic = new Cesium.EllipsoidGeodesic()
        geodesic.setEndPoints(point1cartographic, point2cartographic)
        let s = geodesic.surfaceDistance
        // 返回两点之间的距离
        s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2))
        distance = distance + s
      }
      return distance
    },
    // 计算多边形面积
    getArea (points, positions, type) {
      let res = 0
      // 拆分三角曲面
      for (let i = 0; i < points.length - 2; i++) {
        let j = (i + 1) % points.length
        let k = (i + 2) % points.length
        // let totalAngle = this.Angle(points[i], points[j], points[k]);
        let position1 = [positions[j], positions[0]]
        let position2 = [positions[k], positions[0]]
        let position3 = [positions[j], positions[k]]
        let disTemp1, disTemp2, disTemp3
        if (type === 1) {
          disTemp1 = this.distance(position1[0], position1[1])
          disTemp2 = this.distance(position2[0], position2[1])
          disTemp3 = this.distance(position3[0], position3[1])
        } else {
          disTemp1 = this.getSpaceDistance(position1)
          disTemp2 = this.getSpaceDistance(position2)
          disTemp3 = this.getSpaceDistance(position3)
        }
        let p = (disTemp1 + disTemp2 + disTemp3) / 2
        res += Math.sqrt(p * (p - disTemp1) * (p - disTemp2) * (p - disTemp3))
      }
      return Math.round(res * 10000) / 10000
    },
    distance (point1, point2) {
      let point1cartographic = Cesium.Cartographic.fromCartesian(point1)
      let point2cartographic = Cesium.Cartographic.fromCartesian(point2)
      /** 根据经纬度计算出距离**/
      let geodesic = new Cesium.EllipsoidGeodesic()
      geodesic.setEndPoints(point1cartographic, point2cartographic)
      let s = geodesic.surfaceDistance
      // 返回两点之间的距离
      s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2))
      return s
    }
  }
}
</script>

<style scoped>
  .button{
    margin-right: 6px;
    border-radius: 5px;
    box-sizing: border-box;
    height: 32px;
    width: 32px !important;
    font-size: 25px;
    border: solid 1px #444;
    background-color: rgba(40, 40, 40, 0.7);
    line-height: 32px;
    text-align: center;
    cursor: pointer;
  }
  .button:hover{
    border: 1px solid white;
    background: rgba(68,136,187, 1);
  }
  .button:last-child{
    margin-right: 0;
  }
  .size20{
    font-size: 20px !important;
  }
</style>
<style>
  .cesium-viewer-toolbar{
    right: 233px !important;
  }
  .cesium-viewer-bottom{
    display: none;
  }
  .cesium-widget-credits{ /* 去除logo */
    display:none !important;
  }

</style>
